<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <title>学生列表</title>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jquery-2.1.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/vue-2.6.12.js"></script>
    <script src="./js/axios-0.20.0.js"></script>
</head>
<body>
<div class="container" id="app">
    <!--列表-->
    <div class="row">
        <h3 style="text-align: center">学生列表</h3>
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <table border="1" class="table table-bordered table-hover">
                <tr class="success" style="text-align: center">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>生日</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>

                <tr v-for="(student,index) in studentList">
                    <td>{{student.number}}</td>
                    <td>{{student.name}}</td>
                    <td>{{student.birthday}}</td>
                    <td>{{student.address}}</td>
                    <td>
                        <a class="btn btn-default btn-sm" data-toggle="modal" @click="findByNumber(student.number)"
                           data-target="#updateModal">修改</a>
                        <a class="btn btn-default btn-sm" @click="deleteByNumber(student.number)">删除</a>
                    </td>
                </tr>

                <tr>
                    <td colspan="9" align="center">
                        <a class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加学生</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-lg-3"></div>
    </div>

    <!-- 新增 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号：</label>
                        <input type="text" class="form-control" name="number" v-model="student.number"
                               placeholder="请输入学号">
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" class="form-control" name="name" v-model="student.name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>生日：</label>
                        <input type="text" class="form-control" name="birthday" v-model="student.birthday"
                               placeholder="请输入生日">
                    </div>
                    <div class="form-group">
                        <label>地址：</label>
                        <input type="text" class="form-control" name="address" v-model="student.address"
                               placeholder="请输入地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="save()">新增</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="updateModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号：</label>
                        <input type="text" class="form-control" name="number" v-model="student.number" disabled
                               placeholder="请输入学号">
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" class="form-control" name="name" v-model="student.name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>生日：</label>
                        <input type="text" class="form-control" name="birthday" v-model="student.birthday"
                               placeholder="请输入生日">
                    </div>
                    <div class="form-group">
                        <label>地址：</label>
                        <input type="text" class="form-control" name="address" v-model="student.address"
                               placeholder="请输入地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="update()">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            studentList: [],//学生列表
            student: {},//学生对象
        },
        methods: {

            //查询所有
            findAll() {
                axios.get('student').then(resp => {
                    if (resp.data.code == "1") {
                        this.studentList = resp.data.data;
                    }
                });
            },

            //新增
            save() {
                axios.post('student', this.student).then(resp => {
                    if (resp.data.code == "1") {
                        //1. 关闭模态框
                        $('#addModal').modal('hide');

                        //2. 重新执行findAll
                        this.findAll();

                        //3. 清空student
                        this.student = {};
                    }
                })
            },

            //根据number查询学生信息  /student/hm001
            findByNumber(number) {
                axios.get('student/' + number).then(resp => {
                    if (resp.data.code == "1") {
                        this.student = resp.data.data;
                    }
                })
            },

            //修改
            update() {
                axios.put('student', this.student).then(resp => {
                    if (resp.data.code == "1") {
                        //1. 关闭模态框
                        $('#updateModal').modal('hide');

                        //2. 重新执行findAll
                        this.findAll();

                        //3. 清空student
                        this.student = {};
                    }
                })
            },

            //删除
            deleteByNumber(number) {
                axios.delete('student/' + number).then(resp => {
                    if (resp.data.code == "1") {
                        this.findAll();
                    }
                })
            }

        },
        created() {
            //调用查询所有的方法
            this.findAll();
        }
    })
</script>

</body>
</html>
